<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <!--    <meta name="viewport" content="width=device-width">-->
    <!--    <title>看点</title>-->
    <!--    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />-->

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=750, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-title" content="">
    <title>天线宝宝-支持上下滑动翻页</title>

    <link rel="stylesheet" href="./videojs-mobile-ui.css">
    <link href="./video-js.min.css" rel="stylesheet">

<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.css">-->
<!--    <script src="https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.min.js"></script>-->


    <script src="./video.min.js"></script>
    <script src="./jquery-1.8.0.js"></script>

    <!-- unpkg : use the latest version of Video.js -->
<!--    <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">-->
<!--    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>-->

<!--    &lt;!&ndash; unpkg : use a specific version of Video.js (change the version numbers as necessary) &ndash;&gt;-->
<!--    <link href="https://unpkg.com/video.js@8.3.0/dist/video-js.min.css" rel="stylesheet">-->
<!--    <script src="https://unpkg.com/video.js@8.3.0/dist/video.min.js"></script>-->

<!--    &lt;!&ndash; cdnjs : use a specific version of Video.js (change the version numbers as necessary) &ndash;&gt;-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video.min.js"></script>
    <!--        <script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.5/base64.min.js"></script>-->

</head>
<body>

<div class="page_box">
    <div class="page page1">
        <div class="page1_body">
            <!--            <div class="page1_title">1111</div>-->
            <div class="scroll_box">
<!--                <video class="video-js vjs-matrix" id="my-player" controls width="600px"></video>-->
                    <video
                            id="my-player"
                            class="video-js vjs-matrix"
                            controls
                            width="100%"
                            height="100%"
                            preload="auto"
                            data-setup='{}'>
                        <source id="testVideoSource" src="./index.mp4" type="video/mp4"></source>
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a
                            web browser that
                            <a href="https://videojs.com/html5-video-support/" target="_blank">
                                supports HTML5 video
                            </a>
                        </p>
                    </video>
            </div>
        </div>
    </div>

    <div class="page page2 hide">
        <!--        <div class="page2_title">22222</div>-->
        <div class="page2_body scroll_box">
            <video
                    id="my-player1"
                    class="video-js vjs-matrix"
                    controls
                    width="100%"
                    height="100%"
                    preload="auto"
                    data-setup='{}'>
                <source id="testVideoSource1" src="./index.mp4" type="video/mp4"></source>
                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    web browser that
                    <a href="https://videojs.com/html5-video-support/" target="_blank">
                        supports HTML5 video
                    </a>
                </p>
            </video>
        </div>
    </div>

    <div class="page page3 hide">
        <!--        <div class="page3_title">3333</div>-->
        <div class="page3_body">
            <video
                    id="my-player2"
                    class="video-js vjs-matrix"
                    controls
                    width="100%"
                    height="100%"
                    preload="auto"
                    data-setup='{}'>
                <source id="testVideoSource2" src="./index.mp4" type="video/mp4"></source>
                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    web browser that
                    <a href="https://videojs.com/html5-video-support/" target="_blank">
                        supports HTML5 video
                    </a>
                </p>
            </video>
        </div>
    </div>

    <div class="arrow">
        <div>
            <svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                 viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2859">
                <path d="M491.42 412.298c7.887 12.378 6.427 28.995-4.381 39.803L204.196 734.944l-90.51-90.51c-12.496-12.497-12.496-32.758 0-45.255L396.53 316.337l0.265 0.265 89.974-89.975c12.497-12.496 32.758-12.496 45.255 0l395.98 395.98-90.51 90.51c-12.497 12.497-32.758 12.497-45.255 0L491.42 412.297z"
                      p-id="2860"></path>
            </svg>
        </div>
        <div>
            <svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                 viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2859">
                <path d="M491.42 412.298c7.887 12.378 6.427 28.995-4.381 39.803L204.196 734.944l-90.51-90.51c-12.496-12.497-12.496-32.758 0-45.255L396.53 316.337l0.265 0.265 89.974-89.975c12.497-12.496 32.758-12.496 45.255 0l395.98 395.98-90.51 90.51c-12.497 12.497-32.758 12.497-45.255 0L491.42 412.297z"
                      p-id="2860"></path>
            </svg>
        </div>
    </div>
</div>


<!--<div id="txt" class=""></div>-->
<!--<button type="button" onClick="next()">next</button>-->
<script type="text/javascript">


    const playYet = new Map();
    const screenWidth = window.screen.width;
    const screenHeight = window.screen.height;

    console.error(screenWidth, screenHeight);
    //alert(screenWidth);
   // alert(screenHeight);
    var list = [];
    var lists = [];
    var player;
    var player1;
    var player2;
    var options = {loop: true,muted:true,height:"100px",autoplay:true,fluid:true,class:'video-js vjs-default-skin'};
    // var player = {};
    $(document).ready(function () {
        player = videojs('my-player', options, function onPlayerReady() {

            videojs.log('Your player is ready!');

            // In this context, `this` is the player that was created by Video.js.
            this.play();

            // How about an event listener?
            this.on('ended', function () {
                videojs.log('Awww...over so soon?!');
            });
        });
        player1 = videojs('my-player1', options, function onPlayerReady() {
            videojs.log('Your player is ready!');

            // In this context, `this` is the player that was created by Video.js.
            this.play();

            // How about an event listener?
            this.on('ended', function () {
                videojs.log('Awww...over so soon?!');
            });
        });
        player2 = videojs('my-player2', options, function onPlayerReady() {
            videojs.log('Your player is ready!');

            // In this context, `this` is the player that was created by Video.js.
            this.play();

            // How about an event listener?
            this.on('ended', function () {
                videojs.log('Awww...over so soon?!');
            });

        });
        player.fill(true);
        player1.fill(true);
        player2.fill(true);

        // player.mobileUi();
        // player1.mobileUi();
        // player2.mobileUi();

        // player.fluid(true);
        // player1.fluid(true);
        // player2.fluid(true);
        //plyrInit();
        $.get("/api/videos", function (result) {
            console.error(result);
            var txt = "<ul>"
            //list = result;
            for (const txtElement of result) {
                //txt += '<li onclick=change(\"' + txtElement + '"\")>' + txtElement + '</li>';
                // lists.push({
                //     src: '/preview/' + txtElement,
                //     type: 'application/x-mpegURL',
                //     size: 1080,
                // },);
                list.push(txtElement);
            }
            //txt += "</ul>";
            // $("#txt").html(txt);
            //player = $("#player");
            //player[0].sources = sources;
            // player.play(); // Start playback
            // player.fullscreen.enter(); // Enter fullscreen

            next();
        });

    });

    function change(name, page) {

        $.get("/view/" + name, function (result) {


            player.pause();
            player1.pause();
            player2.pause();
            console.error('change page ', page);
            console.error('change', '/getViewTs/' + (result));
            //alert(page);
            // result = result.substring(,result.)
            if (page === 0 || page === 1 || page == null || page == undefined) {
                player.src({
                    src: '/getViewTs' + (result),
                    type: 'application/x-mpegURL'/*video type*/
                });
                player.load();
                player.play();
            }
            if (page === 2) {
                player1.src({
                    src: '/getViewTs' + (result),
                    type: 'application/x-mpegURL'/*video type*/
                });
                player1.load();
                player1.play();
            }
            if (page === 3) {
                player2.src({
                    src: '/getViewTs' + (result),
                    type: 'application/x-mpegURL'/*video type*/

                });
                player2.load();
                player2.play();
            }
        });

    }

    function next() {
        var i = Math.floor(Math.random() * list.length);
        var random = list[i];
        change(random);
    }

    function nextPage(page) {
        var i = Math.floor(Math.random() * list.length);
        var randomName = list[i];
        console.log(randomName);
        if(i>1) {
            if (playYet.has(randomName)) {
                nextPage(page);
            }
        }
        playYet.set(randomName, true);
        change(randomName, page);
    }

    // 上下滑动
    // element 作用区域（所有执行翻页页面的父级元素DOM）
    // isLoop 是否循环执行翻页
    // needScrollClass 执行翻页页面内部可滚动元素样式名
    function setChangePage(element, isLoop, needScrollClass) {
        // console.log(element.querySelectorAll('.page'));
        // console.log(element.querySelectorAll('.page').length);
        // console.log(element.querySelector('.page'));
        // console.log(element.querySelector('.page2'));
        var pageData = {
            curPage: 1,
            prevPage: null,
            PageL: element.querySelectorAll('.page').length,
            type: null,
            canTouch: true,
            startY: 0,
            endY: 0,
            diff: 0,
        }
        element.addEventListener("touchstart", touchStart, false);
        element.addEventListener("touchmove", touchMove, false);
        element.addEventListener("touchend", touchEnd, false);

        function touchStart(e) {
            pageData.startY = e.touches[0].pageY;
            pageData.endY = '';
            pageData.diff = '';
        }

        function touchMove(e) {
            e.preventDefault();
            pageData.endY = e.touches[0].pageY;
            pageData.diff = pageData.endY - pageData.startY;
        }

        function touchEnd(e) {
            if (Math.abs(pageData.diff) > 150 && pageData.canTouch) {
                changeDoBefore(pageData.diff);
            }
            // setTimeout(function(){
            pageData.startY = '';
            pageData.endY = '';
            pageData.diff = '';
            // },500);
        }

        function changeDoBefore(diffNum) {
            if (diffNum > 0) {
                // 向下滑动进入前一页
                pageData.type = 2;
                if (pageData.curPage <= 1) {
                    if (isLoop) {
                        pageData.prevPage = 1;
                        pageData.curPage = pageData.PageL;
                        changeDo(pageData.curPage);
                    }
                } else {
                    pageData.prevPage = pageData.curPage;
                    pageData.curPage--;
                    changeDo(pageData.curPage);
                }
            } else {
                // 向上滑动进入下一页
                pageData.type = 1;
                if (pageData.curPage >= pageData.PageL) {
                    if (isLoop) {
                        pageData.prevPage = pageData.PageL;
                        pageData.curPage = 1;
                        changeDo(pageData.curPage);
                    }
                } else {
                    pageData.prevPage = pageData.curPage;
                    pageData.curPage++;
                    changeDo(pageData.curPage);
                }
            }
        }

        function changeDo(curPage) {
            console.error('changeDo');

            if (pageData.type == 1) {
                element.querySelector('.page' + pageData.prevPage).classList.remove('inTop', 'outTop', 'inDown', 'outDown', 'hide');
                element.querySelector('.page' + pageData.prevPage).classList.add('outTop');
                element.querySelector('.page' + pageData.curPage).classList.remove('inTop', 'outTop', 'inDown', 'outDown', 'hide');
                element.querySelector('.page' + pageData.curPage).classList.add('inTop');
            } else if (pageData.type == 2) {
                element.querySelector('.page' + pageData.prevPage).classList.remove('inTop', 'outTop', 'inDown', 'outDown', 'hide');
                element.querySelector('.page' + pageData.prevPage).classList.add('outDown');
                element.querySelector('.page' + pageData.curPage).classList.remove('inTop', 'outTop', 'inDown', 'outDown', 'hide');
                element.querySelector('.page' + pageData.curPage).classList.add('inDown');
            }

            if (needScrollClass) {
                scrollEleData.canTouch = false;
                setTimeout(function () {
                    scrollEleData.canTouch = true;
                }, 500);
            }

            pageData.canTouch = false;
            setTimeout(function () {
                pageData.canTouch = true;
                element.querySelector('.page' + pageData.prevPage).classList.add('hide');
            }, 500);
            // 不循环切换时设置最后一页时隐藏向上箭头
            if (pageData.curPage >= pageData.PageL) {
                if (!isLoop) {
                    element.querySelector('.arrow').classList.add('hide');
                }
            } else {
                if (!isLoop) {
                    element.querySelector('.arrow').classList.remove('hide');
                }
            }
            // 执行翻页页面内部可滚动时，设置进入页面后滚动条位置
            if (needScrollClass && element.querySelector('.page' + pageData.curPage).querySelector('.' + needScrollClass)) {
                element.querySelector('.page' + pageData.curPage).querySelector('.' + needScrollClass).scrollTop = 0;
            }
            nextPage(curPage);
        }

        // 执行翻页页面内部可滚动
        if (needScrollClass) {
            var scrollEleData = {
                canTouch: true,
                startY: 0,
                endY: 0,
                diff: 0,
            }
            // console.log(element.querySelectorAll('.' + needScrollClass).length);
            element.querySelectorAll('.' + needScrollClass).forEach(function (item, index) {
                // console.log(item,index);
                item.addEventListener("touchstart", scrollEleTouchStart, false);
                item.addEventListener("touchmove", scrollEleTouchMove, false);
                item.addEventListener("touchend", scrollEleTouchEnd, false);

                function scrollEleTouchStart(e) {
                    player.pause();
                    player1.pause();
                    player2.pause();
                    console.error(e);
                    // e.stopPropagation();
                    element.removeEventListener("touchmove", touchMove, false);
                    scrollEleData.startY = e.touches[0].pageY;
                    scrollEleData.endY = '';
                    scrollEleData.diff = '';
                }

                function scrollEleTouchMove(e) {
                    console.error("11111111111");
                    scrollEleData.endY = e.touches[0].pageY;
                    scrollEleData.diff = scrollEleData.endY - scrollEleData.startY;
                }

                function scrollEleTouchEnd(e) {
                    element.addEventListener("touchmove", touchMove, false);
                    // console.log(scrollEleData.canTouch);
                    if (Math.abs(scrollEleData.diff) > 150 && scrollEleData.canTouch) {
                        changeDoBefore(scrollEleData.diff);
                    }
                    // setTimeout(function(){
                    scrollEleData.startY = '';
                    scrollEleData.endY = '';
                    scrollEleData.diff = '';
                    // },500);
                }

                item.addEventListener("scroll", scrollDo, false);

                function scrollDo(e) {
                    console.error(e.target.clientHeight, e.target.scrollTop, e.target.scrollHeight);
                    if ((e.target.clientHeight + e.target.scrollTop + 2 >= e.target.scrollHeight) || (e.target.scrollTop == 0)) {
                        setTimeout(function () {
                            scrollEleData.canTouch = true;
                        }, 500);
                    } else {
                        scrollEleData.canTouch = false;
                    }
                }
            })
        }
    }

    /***************************/

    // 例：
    // 循环执行翻页
    setChangePage(document.getElementsByClassName('page_box')[0], 'loop', 'scroll_box');
</script>
</body>
<style type="text/css">

    video {
        /*// min-width:400px !important;*/
        min-height: 98vh;
        height: 100vh;
        background-color: #fff;
    }

    .video-js .vjs-tech {
        position: inherit;
        height: 100%;
    }

    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    body {
        font-family: "PingFangSC-Regular", "sans-serif", "STHeitiSC-Light", "微软雅黑", "Microsoft YaHei";
        font-size: 18px;
        line-height: 1.6;
        color: #212121;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        touch-callout: none;
    }

    html, body {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        min-height: 98vh;
        background-color: #fff;
    }

    .vjs-control-bar {
        height: 60px;
    }

    /***************************/
    .page_box {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .page {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page.hide {
        display: none;
    }

    .page.inTop {
        -webkit-animation: ShowTop .5s ease-out both;
        animation: ShowTop .5s ease-out both;
    }

    .page.outTop {
        -webkit-animation: HideTop .5s ease-out both;
        animation: HideTop .5s ease-out both;
    }

    .page.inDown {
        -webkit-animation: ShowDown .5s ease-out both;
        animation: ShowDown .5s ease-out both;
    }

    .page.outDown {
        -webkit-animation: HideDown .5s ease-out both;
        animation: HideDown .5s ease-out both;
    }

    @-webkit-keyframes ShowTop {
        0% {
            -webkit-transform: translateY(100%);
        }
        100% {
            -webkit-transform: translateY(0);
        }
    }

    @keyframes ShowTop {
        0% {
            transform: translateY(100%);
        }
        100% {
            transform: translateY(0);
        }
    }

    @-webkit-keyframes HideTop {
        0% {
            -webkit-transform: translateY(0);
        }
        100% {
            -webkit-transform: translateY(-100%);
        }
    }

    @keyframes HideTop {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-100%);
        }
    }

    @-webkit-keyframes ShowDown {
        0% {
            -webkit-transform: translateY(-100%);
        }
        100% {
            -webkit-transform: translateY(0);
        }
    }

    @keyframes ShowDown {
        0% {
            transform: translateY(-100%);
        }
        100% {
            transform: translateY(0);
        }
    }

    @-webkit-keyframes HideDown {
        0% {
            -webkit-transform: translateY(0);
        }
        100% {
            -webkit-transform: translateY(100%);
        }
    }

    @keyframes HideDown {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(100%);
        }
    }

    .arrow {
        width: 60px;
        height: 52px;
        color: #f00;
        font-size: 36px;
        position: absolute;
        left: 50%;
        margin-left: -30px;
        bottom: 0;
        -webkit-animation: fadeIn .5s 1s ease-in-out both;
        animation: fadeIn .5s 1s ease-in-out both;
    }

    .arrow.hide {
        display: none;
    }

    .arrow div:first-child, .arrow div:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 40px;
        position: absolute;
        left: 0;
        -webkit-transform-origin: center top;
        transform-origin: center top;
    }

    .arrow div:first-child {
        top: 0;
        -webkit-animation: arrow .8s .5s ease-in-out infinite alternate;
        animation: arrow .8s .5s ease-in-out infinite alternate;
    }

    .arrow div:last-child {
        top: 12px;
        -webkit-animation: arrow .8s .8s ease-in-out infinite alternate;
        animation: arrow .8s .8s ease-in-out infinite alternate;
    }

    @-webkit-keyframes arrow {
        100% {
            -webkit-transform: translateY(-50%);
            opacity: 1;
        }
        0% {
            -webkit-transform: translateY(0);
            opacity: 0;
        }
    }

    @keyframes arrow {
        100% {
            transform: translateY(-50%);
            opacity: 1;
        }
        0% {
            transform: translateY(0);
            opacity: 0;
        }
    }

    /***************************/

    @-webkit-keyframes fadeInMinToMax {
        0% {
            -webkit-transform: scale(0);
            opacity: 0;
        }
        100% {
            -webkit-transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes fadeInMinToMax {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .page {
        font-size: 20px;
        /*background: url() repeat-y;*/
        background-size: 100%;
        background-color: #2a2a2a;
    }

    .page1_title {
        width: 100%;
        height: 20px;
        line-height: 20px;
        margin: 0 auto;
        text-align: center;
        font-size: 20px;
        -webkit-animation: fadeInMinToMax .8s .4s ease-out both;
        animation: fadeInMinToMax .8s .4s ease-out both;
    }

    .page1 .scroll_box {
        width: 100%;
        height: 100vh;
        margin: 0 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-animation: fadeInMinToMax 1.5s .4s ease-out both;
        animation: fadeInMinToMax 1.5s .4s ease-out both;
    }

    .page2 .scroll_box {
        width: 100%;
        height: 100%;
        text-align: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page3 .scroll_box {
        width: 100%;
        height: 100%;
        text-align: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page2 .scroll_box > div {
        padding: 0 0px 0 0;
    }

    .page3_body {
        height: 100vh;
        /*position: absolute;*/
    }


    /*自定义样式 */
    /* Change all text and icon colors in the player. */
    .vjs-matrix.video-js {
        color: #ffffff;
    }
    .vjs-matrix.video-js .vjs-control-bar {
        height: 80px !important;
    }
    .vjs-matrix.video-js .vjs-play-control .vjs-control .vjs-button{
        height: 80px !important;
        width: 60px !important;
        position: relative;
    }
    .vjs-matrix.video-js .vjs-play-control .vjs-control{
        height: 80px !important;
        width: 60px !important;
        position: relative;
    }
    .vjs-matrix.video-js .vjs-control .vjs-button{
        height: 80px !important;
        width: 60px !important;
        position: relative;
    }
    .vjs-matrix.video-js .vjs-button>.vjs-icon-placeholder:before {
        font-size: 3.8em;
        line-height: 2;
        position: relative;
        width: 60px !important;
        margin: auto;
    }
    .vjs-matrix.video-js .vjs-progress-control {
        cursor: pointer;
        flex: auto;
        display: flex;
        align-items: center;
        min-width: 4em;
        touch-action: none;
        width: 80% !important;
    }
    .vjs-matrix.video-js .vjs-time-control {
        flex: none;
        font-size: 2.8em;
        line-height: 3em;
        min-width: 2em;
        width: auto;
        color: #0ff29d;
        padding-left: 0.1em !important;
        padding-right: 0.1em !important;
    }
    /* Change the border of the big play button. */
    .vjs-matrix .vjs-big-play-button {
        border-color: #ffffff;
    }

    /* Change the color of various "bars". */
    .vjs-matrix .vjs-volume-level,
    .vjs-matrix .vjs-play-progress,
    .vjs-matrix .vjs-slider-bar {
        background: #ffffff;
    }

    /* -======================================================*/
    .page2_body div:nth-child(1), .page3_body div:nth-child(1) {
        -webkit-animation: fadeInMinToMax .8s .4s ease-out both;
        animation: fadeInMinToMax .8s .4s ease-out both;
    }

    .page2_body div:nth-child(2), .page3_body div:nth-child(2) {
        -webkit-animation: fadeInMinToMax .8s .5s ease-out both;
        animation: fadeInMinToMax .8s .5s ease-out both;
    }

    .page2_body div:nth-child(3), .page3_body div:nth-child(3) {
        -webkit-animation: fadeInMinToMax .8s .6s ease-out both;
        animation: fadeInMinToMax .8s .6s ease-out both;
    }

    .page2_body div:nth-child(4), .page3_body div:nth-child(4) {
        -webkit-animation: fadeInMinToMax .8s .7s ease-out both;
        animation: fadeInMinToMax .8s .7s ease-out both;
    }

    .page2_body div:nth-child(5), .page3_body div:nth-child(5) {
        -webkit-animation: fadeInMinToMax .8s .8s ease-out both;
        animation: fadeInMinToMax .8s .8s ease-out both;
    }

    .page2_body div:nth-child(6), .page3_body div:nth-child(6) {
        -webkit-animation: fadeInMinToMax .8s .9s ease-out both;
        animation: fadeInMinToMax .8s .9s ease-out both;
    }

    .page2_body div:nth-child(7), .page3_body div:nth-child(7) {
        -webkit-animation: fadeInMinToMax .8s 1s ease-out both;
        animation: fadeInMinToMax .8s 1s ease-out both;
    }

    .page2_body div:nth-child(8), .page3_body div:nth-child(8) {
        -webkit-animation: fadeInMinToMax .8s 1.1s ease-out both;
        animation: fadeInMinToMax .8s 1.1s ease-out both;
    }

    .page2_body div:nth-child(9), .page3_body div:nth-child(9) {
        -webkit-animation: fadeInMinToMax .8s 1.2s ease-out both;
        animation: fadeInMinToMax .8s 1.2s ease-out both;
    }

    .page2_body div:nth-child(10), .page3_body div:nth-child(10) {
        -webkit-animation: fadeInMinToMax .8s 1.3s ease-out both;
        animation: fadeInMinToMax .8s 1.3s ease-out both;
    }
</style>
</html>